<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('information.fund') }}</view>
    </view>
    <view class="main">
        <view class="form">
            <view class="password form-item">
                <input class="password-input" v-model="form.phone" :placeholder="$t('with.input1')" type="text">
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.withPwd" :placeholder="$t('with.input2')" type="password">
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="withPwd" :placeholder="$t('with.input3')" type="password">
            </view>
        </view>
        <!-- 提交 -->
        <view class="logout" @click="submit()">
            {{ $t('with.sub') }}
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { requestApi } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/utils/storage';
// 獲取this
const _this = getCurrentInstance().appContext.config.globalProperties

const withPwd = ref(null)
const form = reactive({
    withPwd: '',
    phone: '',
})
// 表单验证规则
const rules = reactive({
    withPwd: [
        {
            rule: /^.{2,18}$/,
            message: _this.$t('with.withPwd'),
        },
    ],
    phone: [
        {
            rule: /^1[3456789]\d{9}$/,
            message: _this.$t('with.phone'),
        },
    ],
});
function validate(key) {
    let flag = true;
    rules[key].forEach((v) => {
        if (!v.rule.test(form[key])) {
            toast(v.message)
            flag = false;
            return false;
        }
    });
    return flag;
}
const submit = async () => {
    if (!validate("phone")) return; //validate('username')为false才执行
    if (!validate("withPwd")) return; //validate('password')为false才执行

    if (withPwd.value == form.withPwd) {
        const { status, msg } = await requestApi.insertWithPwd(form)
        if (status == 0) {
            toast(msg)
        } else {
            toast(msg)
        }
    } else {
        uni.showToast({
            title: _this.$t('with.pwdDif'),
            icon: 'none',
            duration: 2000
        });
    }
}

// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
async function getUserInfo() {
    const { status, data } = await requestApi.getUserInfo()
    if (data.withPwd) {
        setTimeout(() => {
            navigateBack()
        }, 1000)
        uni.showToast({
            title: _this.$t('with.havPwd'),
            icon: 'none',
            duration: 2000
        });
    }
}
onLoad(() => {
    getUserInfo()
})
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    margin-top: 88rpx;
    // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 99;
    top: 0rpx;
    background-color: #191A22;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    margin: 59rpx 44rpx 0rpx 40rpx;

    margin-top: 147rpx;
    // #ifndef H5
    margin-top: calc(88rpx + 88rpx + 59rpx);
    // #endif

    .form {

        .form-item {
            background-color: #20212A;
            position: relative;
            margin-bottom: 49rpx;
            height: 90rpx;
            border-radius: 28rpx;

            input {
                height: 100%;
                padding-left: 204rpx;
                color: #c7c7c7;
            }

            .label {
                color: #fff;
                position: absolute;
                top: 50%;
                left: 24rpx;
                transform: translateY(-50%);
            }
        }

        // .realname {}
    }

    .logout {
        background-color: #2D7DFC;
        width: 500rpx;
        height: 96rpx;
        margin: 69rpx auto 73rpx;
        line-height: 96rpx;
        text-align: center;
        border-radius: 204rpx;
        color: #fff;
        letter-spacing: 2rpx;
    }
}

.toast {
    background-color: #292A36;
    width: 304rpx;
    height: 304rpx;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-res {
        margin-top: 40rpx;
        width: 101rpx;
        height: 101rpx;
    }

    .result {
        margin-top: 14rpx;
    }

    .view-card {
        display: flex;
        align-items: center;

        view {
            margin-top: 30rpx;
            color: #4A80FF;
        }

        image {
            width: 8rpx;
            margin-top: 30rpx;
            margin-left: 8rpx;
            height: 14rpx;

        }
    }
}

.text-grey {
    color: #c7c7c7 !important;
}
</style>a